<template class="firstpage">
  <div>

    <div class="boxMargin">
      <el-tabs v-model="customData.activeName" style="width:80%;" @tab-click="handleClick">
        <el-tab-pane label="图文详情" name="first">
          <!-- 富文本开始 -->
          <div class="edit_container" style="margin-top:10px;" v-html="customData.descInfo" />
          <!-- 富文本结束 -->
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>

import $ from 'jquery'
import _validate from '../../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../../framework/commonJs/wptx_tools'
import _common from '../../../../../framework/commonJs/wptx_common'
import { global } from '../../../../../filter/global-api'
// 富文本开始
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  [
    {
      header: 1
    },
    {
      header: 2
    }
  ],
  [
    {
      list: 'ordered'
    },
    {
      list: 'bullet'
    }
  ],
  [
    {
      size: ['small', false, 'large', 'huge']
    }
  ],
  [
    {
      header: [1, 2, 3, 4, 5, 6, false]
    }
  ],
  [
    {
      color: []
    },
    {
      background: []
    }
  ],
  [
    {
      align: []
    }
  ],
  ['image']
]
// 富文本结束
import _api from '@/framework/API/generalItem'
const _FUNCTION_NAME = ''
export default {
  // 富文本开始
  components: {
    quillEditor
  },
  filters: {},
  // 富文本结束

  data() {
    return {
      editorOption: {
        placeholder: '',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              'image': function(value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },

      tableData: [],

      searchData: {
      },

      searchDataBuffer: {
      },

      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },

      dialogData: {},

      historyData: {},

      infoData: {},

      customData: {
        activeName: 'first',
        descInfo: '',
        masterItemId: '',
        id: ''
      },
      form: {
      },
      rules: {}
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },
  beforeDestroy() { },
  methods: {
    onInit(data) {
      const self = this
      self.customData.masterItemId = self.$route.query.itemId
      const params = {
        masterItemId: self.$route.query.itemId
      }
      _api.descDetail(self, params, self.callBack_descDetail)
    },
    onSearch(data) {
      const self = this
    },
    onChangePage(data) {
      const self = this
    },
    onReset(data) {
      const self = this
    },
    onAdd(data) { },
    onDelete(data) {
      const self = this
    },
    onInfo(data) {
      const self = this
    },
    onUpdate(formName) {
      const self = this
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable(data) {
      const self = this
    },
    onEnable(data) {
      const self = this
    },
    onUpload(data) { },
    onBathUpload() { },
    onExport(data) { },
    onDownload(data) { },
    onHistory(data) { },
    callBack_descDetail(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
      } else {
        self.customData.id = data.data.id
        self.customData.descInfo = data.data.descInfo
      }
    },
    handleClick(tab) {
      const self = this
      if (tab.name == 'first') {
      } else if (tab.name == 'second') {
      }
    }
  }
}
</script>

<style scoped>
.header{
    line-height: 45px;
    font-size: 15px;
}
.quill-editor {
    /* height: 500px; */
    max-height: 600px;
    overflow-y: scroll;
}
.edit_container{
    border:1px solid #999;
    overflow-y: scroll;
    max-height: 600px;
}
</style>
